<template>
  <div class="collapse-content">
    <el-collapse v-for="item in items" :key="item.id" v-model="activeItem" accordion>
      <el-collapse-item :name="item.id">
        <template #title>
          <div class="content ">
            <div class="content-top pointer" @click.stop="stop">
              <div class="flex " @click="expend(item)">
                <img :class="[activeItem == item.id ? 'isActive' : '']" src="@/assets/images/comm/sanjiao.png">
                <span class="pointer">区域编号：{{ item.id }}</span>
                <div class="box ">{{ item.roomNames[0] }}</div>
              </div>
              <div class="flex">
                <img @click="toEdit(item)" class="mg-r10" src="@/assets/images/comm/edit.png">
                <img @click="toDelete" src="@/assets/images/comm/delete.png">
              </div>
            </div>
            <GreyText :item="item" />
          </div>
        </template>
        <div class="body-cotent">
          <div class="item-row">
            <template v-for="key in item.modelProperty.modelParameterList[0].modelParameterKeyList">
              <pre> {{ getModelLabel(key, item.modelProperty.modelParameterValueMap) }}</pre>
              <!-- <div>{{ getModelLabel(key, item.modelProperty.modelParameterValueMap) }}</div>
              <div v-if="getModelLabel(key, item.modelProperty.modelParameterValueMap)?.widgetType == 0">数字编辑</div>
              <div v-if="getModelLabel(key, item.modelProperty.modelParameterValueMap)?.widgetType == 1">下拉</div>
              <div v-if="getModelLabel(key, item.modelProperty.modelParameterValueMap)?.widgetType == 2">单选</div>
              <div v-if="getModelLabel(key, item.modelProperty.modelParameterValueMap)?.widgetType == 3">开关</div>
              <div v-if="getModelLabel(key, item.modelProperty.modelParameterValueMap)?.widgetType == 4">多行文本</div>
              <div v-if="getModelLabel(key, item.modelProperty.modelParameterValueMap)?.widgetType == 5">{{
                getModelLabel(key, item.modelProperty.modelParameterValueMap)?.currentValue }}</div>
              <div v-if="getModelLabel(key, item.modelProperty.modelParameterValueMap)?.widgetType == 6" class="card">
                <img src="@/assets/images/comm/empty.png">
                <div class="img"></div>
                <div>
                  <div>集成吊装</div>
                  <div style="color:#C1C5D9">未选择</div>
                </div>
                <img class="waring-tip" src="@/assets/images/comm/waring.png">
              </div>
              <div v-if="getModelLabel(key, item.modelProperty.modelParameterValueMap)?.widgetType == 7">饰面</div>
              <div v-if="getModelLabel(key, item.modelProperty.modelParameterValueMap)?.widgetType == 8">商品信息</div>
              <div v-if="getModelLabel(key, item.modelProperty.modelParameterValueMap)?.widgetType == 9">预估价格</div>
              <div v-if="getModelLabel(key, item.modelProperty.modelParameterValueMap)?.widgetType == 10">待选品</div>
              <div v-if="getModelLabel(key, item.modelProperty.modelParameterValueMap)?.widgetType == 11">颜色</div>
              <div v-if="getModelLabel(key, item.modelProperty.modelParameterValueMap)?.widgetType == 12">文本编辑</div>
              <div v-if="getModelLabel(key, item.modelProperty.modelParameterValueMap)?.widgetType == 13">表头</div>
              <div v-if="getModelLabel(key, item.modelProperty.modelParameterValueMap)?.widgetType == 14">生成图</div> -->
            </template>

          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup lang="ts">
import { getModelLabel } from "@/utils/findModeBykey";
import GreyText from "./GreyText.vue"
import { ref, toRefs } from "vue"
import { useTopDesign } from "@/store/useTopDesign";
const activeItem = ref('a')
const props = defineProps<{
  items: ICeilingStyle[]
}>()
const stop = () => {

}
const emits = defineEmits<{
  (e: 'edit', id: string)
}>()
const expend = (item: ICeilingStyle) => {
  if (activeItem.value == item.id) {
    activeItem.value = ''
  } else {
    activeItem.value = item.id
  }

}
const { setCurrentCeilingStyle } = toRefs(useTopDesign())
const toEdit = (item: ICeilingStyle) => {
  console.log("编辑", item)
  setCurrentCeilingStyle.value(item)
  emits('edit', item.id)
}
const toDelete = () => {
  console.log('删除')
}


</script>
<style lang="scss" scoped>
:deep(.el-collapse-item__header) {

  height: 88px;
  border: 1px solid var(--, #E5E7E7);

}

:deep(.el-collapse-item__arrow) {
  display: none;
}

.body-cotent {
  .item-row {
    // height: 100px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;

    >div {
      margin-left: 8px;
    }

    .card {
      width: 224px;
      height: 70px;
      flex-shrink: 0;
      border-radius: var(--radius-sm, 4px);
      border: 1px solid var(--, #E5E7E7);
      background: var(--, #FFF);
      background-color: pink;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 0 8px;
      font-size: 12px;



      .waring-tip {
        position: absolute;
        right: 20px;
        top: 20px;
      }

      .img {
        width: 54px;
        height: 54px;
        flex-shrink: 0;
        border-radius: var(--radius-sm, 4px);
        border: 1px solid var(--, #E5E7E7);
        background: #F2F4F7;
        margin-right: 10px;
      }
    }
  }
}

.content {
  width: 100%;
  height: 100%;
  padding: 6px 11px;
}

.content-top {
  width: 100%;
  height: 34px;
  display: flex;
  justify-content: space-between;

  .box {

    color: var(--, #555);
    font-weight: 400;
    margin-left: 12px;
    height: 20px;
    line-height: 20px;
    padding: 0 5px;
    border: 1px solid #E5E7E7;
    border-radius: 4px;

  }


  img {
    transition: all 0.3s;
  }

  .isActive {
    transform: rotate(90deg);
  }

  img {
    width: 16px;
    height: 16px;
  }
}
</style>